<template>
  <div class="header-menu-container">

    <div class="header-menu-item" v-for="item in menuTabs">
      <a class="menu-link" :class="{'': item.appName === appName}" target="_self" @click="toMenu(item)">
        <div class="logo">
          <svg class="iconfont head-portrait" aria-hidden="true">
            <use :xlink:href="`#${item.icon}`"/>
          </svg>
        </div>
        <div class="text">{{ item.title }}</div>
      </a>
    </div>

  </div>
</template>

<script lang="ts" setup>
import {ref} from 'vue';
import {useRouter} from "vue-router";
import {useAppStore} from "@/store/modules/app";
import {useApp} from "@/hooks";

const {appName, changeApp} = useApp();
const appStore = useAppStore();
const router = useRouter();
const menuTabs = ref([
  {
    appName: 'mall',
    icon: 'icon-shangcheng',
    title: '商城',
    path: '/admin'
  },

  {
    appName: 'wecat',
    icon: 'icon-weixin',
    title: '微信',
    path: '/wecat'
  },
  {
    appName: 'file',
    icon: 'icon-wenjianguanli',
    title: '文件',
    path: '/file'
  },
  {
    appName: 'kefu',
    icon: 'icon-kefuguanli',
    title: '客服',
    path: '/kefu'
  },
  {
    appName: 'member',
    icon: 'icon-huiyuan',
    title: '会员',
    path: '/member'
  }, {
    appName: 'system',
    icon: 'icon-xitong',
    title: '系统',
    path: '/system'
  }
])

const toMenu = (item) => {
  changeApp(item.appName);
}

</script>

<style lang="scss" scoped>
.header-menu-container {
  display: flex;
  flex-direction: column;
  align-items: center;

  .header-menu-item {
    margin-bottom: 16px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    .menu-selected-item {
      background: #ffffff;
      background: var(--devui-base-bg, #ffffff);
      box-shadow: 0 2px 6px #252b3a1f;
      box-shadow: var(--devui-shadow-length-base, 0 2px 6px 0) var(--devui-light-shadow, rgba(37, 43, 58, .12));

      color: var(--devui-text, #252b3a) !important;
    }

    a {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;

      .logo {
        display: flex;
        color: var(--devui-aide-text, #8a8e99);
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        margin-bottom: 2px;
        border-radius: var(--devui-border-radius-card, 6px);
        transition: all var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1));
      }

      .logo:hover {
        background: var(--devui-base-bg, #ffffff);
        box-shadow: var(--devui-shadow-length-base, 0 2px 6px 0) var(--devui-light-shadow, rgba(37, 43, 58, .12));
        color: var(--devui-text, #252b3a) !important;
      }


      .text {
        color: var(--devui-aide-text, #8a8e99);
        font-size: var(--devui-font-size-sm, 12px);
        line-height: 20px;
        width: 60px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
      }

      .text:hover {
        color: var(--devui-text, #252b3a) !important;
      }
    }

    a:hover, a:focus {
      color: #526ecc;
      color: var(--devui-link, #526ecc);
      outline: 0;
    }
  }

  .menu-link:hover {
    color: var(--devui-text, #252b3a) !important;
  }

  .iconfont {
    width: 24px;
    height: 24px;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
}
</style>
